<template>
	<view class="content">
		<view class="top">
			<text><text>你好</text> <text>请先登录</text></text>
			<view>
				<icon type="search" size="14"></icon>
				<input type="text" placeholder="请输入关键词" @tap="jump"/>
			</view>
		</view>
		<swiper class="banner" :indicator-dots="true">
			<swiper-item v-for="img in banner">
				<image class="bannerimg" :src="img.bannerImg"></image>
			</swiper-item>
		</swiper>
		<view class="hot-list">
			<CoffeeItem v-for="item in hotProduct" :key="item.id" :coffee="item"></CoffeeItem>
		</view>
		
		<button @click="postdata" type="warn">往detail传值</button>
	</view>
</template>

<script>
	import {get} from '../../tools/request.js'
	import CoffeeItem from '@/components/CoffeeItem/CoffeeItem.vue'
	export default {
		data() {
			return {
				banner:[],
				hotProduct:[]
			}
		},
		components:{
			CoffeeItem
		},
		onLoad() {
			// let that=this;
			// uni.request({
			// 	url:"http://www.kangliuyong.com:10002/banner?appkey=U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
			// 	success(result){
			// 		console.log(result);
			// 		that.banner=result.data.result;
			// 	}
			// })
			//支持Promise风格调用.
			// uni.request({url:"http://www.kangliuyong.com:10002/banner?appkey=U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA="})
			// .then(result=>{
			// 	this.banner=result.data.result;
			// }).catch(ex=>{
			// 	console.log("请求失败",ex);
			// })
			get("/banner").then(result=>{
				this.banner=result.data.result;
			}).catch(er=>{
				console.log("请求失败!",er);
			});
			this.getHostProduct();
			//绑定一个postprice事件 监听子组件触发这个事件
			//子传父组件 事件通讯. uni.$on() uni.$emit() 他们触发和绑定都是全局事件
			uni.$on("postprice",(data)=>{
				console.log("index组件获取子组件传值的数据===>",data);
			});
			//用来代替以前的 @click="abcd"  子组件还是用 $emit()触发事件
			uni.$on("click",()=>{
				//事件处理函数
			});
		},
		methods: {
			getHostProduct(){
				get("/typeProducts",{key:'isHot',value:1}).then(re=>{
					this.hotProduct=re.data.result;
				});
			},
			jump(){
				uni.navigateTo({
					//在app里面 url地址一般都是绝对根路径 /pages/开头.
					url:"/pages/search/search"
				})
			},
			postdata(){
				//以前的eventBus原理. vue1 vue2里面老技术.
				//错误用法...在下一级页面第一次不会触发事件.错误用法...错误用法...错误用法...错误用法...错误用法...
				//页面通讯...
				//触发事件 如果进入 pages/detail/detail事件不会被触发，
				//因为detail还没有绑定. 第二次进入才会触发事件.
				//然后跳转
				uni.navigateTo({
					url:"/pages/detail/detail"
				});
				//不要这样子到其他页面. 除非这个页面先绑定事件，一般用往上级传值
				uni.$emit("hello",{name:"猫屎咖啡",price:99});
				//错误用法...错误用法...错误用法...错误用法...错误用法...错误用法...
				//$on $emit就是组件通讯 综合 provide 自定义事件的优点. 一般用在子传父
			}
		}
	}
</script>
<!-- 
	props
	this.$refs.子组件直接修改
	//子传父   
	this.$emit('xxx') 反向传值 @xxx=''
	provide/inject
	this.$parant.xxx
	//全局
	vuex
	pinia
	//在vue2 vue1 uniapp 有一个事件监听
	this.$on('监听事件名称xxx','事件处理函数')
	this.$emit('触发事件xxx',{事件参数})
	this.$once('监听一次事件xx',事件处理函数)
	this.$off('移除监听事件名称')
 -->
<style lang="scss">
	// rpx 把分为750rpx uniapp小程序才有rpx  rpx rem em vh vw是相对单位  px是固定单位 
	// 设计师给你的图图片 宽度为750px=750rpx  1px =1rpx;  x2倍图
	//设计师给你的图片宽度为375px=750rpx 1px=2rpx
	// 设计图 375px 里面有一个图片宽度 155px  换算成310rpx
	.top{
		display: flex;
		padding:10px;
		align-items: center;
		text{
			width:250rpx;
			display: block;
		}
		view{
			flex:1;
			position: relative;
			icon{
				position:absolute;
				left:10rpx;
				top:50%;
				transform: translateY(-50%);
			}
			input{
				background-color: #eeeeee;
				border-radius:5px;
				height: 62rpx;
				text-indent: 50rpx;
			}
		}
	}
	.banner{
		height:460rpx;
	}
	.bannerimg{
		width:100%;
		display: block;
	}
	.hot-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
</style>
